<template>
 <div>
      <a-breadcrumb style="margin: 0px 0px 0px 0px">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>个人经历</a-breadcrumb-item>
          <a-breadcrumb-item>成长树</a-breadcrumb-item>
        </a-breadcrumb>
    <el-card style="margin-top:30px" shadow="hover">
  <el-container>
  <el-main>
      <el-card>
   <div>
    <a-descriptions
      title="个人履历"
      bordered
      :column="{ xxl: 2, xl: 2, lg: 3, md: 3, sm: 2, xs: 1 }"
    >
      <a-descriptions-item label="姓名" >
        张三
      </a-descriptions-item>
      <a-descriptions-item label="性别">
        男
      </a-descriptions-item>
      <a-descriptions-item label="出生年月">
        1985.7
      </a-descriptions-item>
      <a-descriptions-item label="学历">
        大专
      </a-descriptions-item>
      <a-descriptions-item label="工作经验">
        3年
      </a-descriptions-item>
       <a-descriptions-item label="健康状况">
        健康
      </a-descriptions-item>
       <a-descriptions-item label="政治面貌">
        清白
      </a-descriptions-item>
      <a-descriptions-item label="现住地址">
        北京西二环
      </a-descriptions-item>
       <a-descriptions-item label="户籍地址">
        福州西二环
      </a-descriptions-item>
       <a-descriptions-item label="联系电话">
        13882815486
      </a-descriptions-item>
       <a-descriptions-item label="联系邮箱">
        1053831109@qq.com
      </a-descriptions-item>
      <!-- <a-descriptions-item label="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication factor: 3
        <br />
        Region: East China 1
      </a-descriptions-item> -->
    </a-descriptions>
  </div>
  </el-card>
  </el-main>
  <!-- 右侧aside布局 -->
  <el-aside width="400px">
    <div class="tree">
      <a-timeline mode="alternate">
    <a-timeline-item>百度业务员</a-timeline-item>
    <a-timeline-item>
      <a-icon slot="dot" type="clock-circle-o" style="font-size: 14px;" />
      2016年2月
    </a-timeline-item>
    <a-timeline-item color="orange">
     张专家评论：<el-rate
  v-model="value"
  show-text>
</el-rate>

    </a-timeline-item>
    <a-timeline-item color="green">
     紫光公司业务员
    </a-timeline-item>
    <a-timeline-item>
      <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
      2015年7月
    </a-timeline-item>
    <a-timeline-item color="red">
     北大毕业
    </a-timeline-item>
    <a-timeline-item>
      <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
      2014年7月
    </a-timeline-item>
    <a-timeline-item>清华附中</a-timeline-item>
    <a-timeline-item>
      <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
      2010年7月
    </a-timeline-item>
  </a-timeline>
    </div>
  </el-aside>
</el-container>
    
    
    
    </el-card></div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  data() {
    return {
      loading: false,
      imageUrl: '',
      value: null};
  }, methods: {
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>

 <style scoped>
 .el-aside {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-row {
    margin-bottom: 20px;
  } 
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #E9EEF3;
  }
  .bg-purple {
    background:#E9EEF3;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 18px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 .tree{
   margin-top: 40px;
   height: 400px;
   margin-left: -100px;
 }
 .ant-timeline-item {
    position: relative;
    margin: 0;
    padding: 0 0 20px;
    font-size: 14px;
    list-style: none;
    height: 45px;
    }

   .left{
     width: 500px;
     height: 800px;
   }
</style>